<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>ᠴᠡᠭ ᠲᠡᠮᠳᠡᠭ</title>
		<link rel="icon" href="./favicon.ico" type="image/icon type">
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="elementui/index.css" />
		<link rel="stylesheet" href="css/index.css" />
		<script src="js/vue@2.js" type="text/javascript" charset="utf-8"></script>
		<script src="elementui/elementui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/request.js" type="text/javascript" charset="utf-8"></script>
		<style>
			li:hover {
				background-color: #02A7F0;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<div class="container">
				<div class="logo">
					<img src="images/logo1.png" alt="" />
					<label for="">ᠴᠡᠭ  ᠲᠡᠮᠳᠡᠭ </label>
				</div>
				<el-tabs :tab-position="'left'" v-model="activeName">
					<el-tab-pane name="first">
						<span slot="label">ᠠᠪᠢᠶᠠᠨ <br>ᠲᠡᠮᠳᠡᠭ </span>
						<div class="row" style="margin-left: 20px;width: 200px;min-width: 200px;">
							<ul class="formBox">
								<li v-for="item in symbol1.split('')" @click="symbolSelect(item)">{{item}}</li>
							</ul>
						</div>
					</el-tab-pane>
					<el-tab-pane name="second">
						<span slot="label">  ᠭᠷᠧᠭ᠂ <br>ᠯᠠᠲ᠋ᠢᠨ</span>
						<div class="row" style="margin-left: 20px;width: 80px;min-width: 80px;">
							<ul class="formBox">
								<li v-for="item in symbol2[0].split('')" @click="symbolSelect(item)">{{item}}</li>
							</ul>
						</div>
						<div class="row" style="margin-left: 20px;width: 80px;min-width: 80px;">
							<ul class="formBox">
								<li v-for="item in symbol2[1].split('')" @click="symbolSelect(item)">{{item}}</li>
							</ul>
						</div>
						<div class="row" style="margin-left: 20px;width: 120px;min-width: 120px;">
							<ul class="formBox">
								<li v-for="item in symbol2[2].split('')" @click="symbolSelect(item)">{{item}}</li>
							</ul>
						</div>
						<div class="row" style="margin-left: 20px;width: 120px;min-width: 120px;">
							<ul class="formBox">
								<li v-for="item in symbol2[3].split('')" @click="symbolSelect(item)">{{item}}</li>
							</ul>
						</div>
					</el-tab-pane>
					<el-tab-pane name="third">
						<span slot="label">   ᠳ᠋ᠤᠭᠠᠷᠯᠠᠬᠤ  <br>ᠲᠡᠮᠳᠡᠭ</span>
						<div class="row" style="margin-left: 18px;width: 80px;min-width: 80px;">
							<ul class="formBox">
								<li v-for="item in symbol3[0].split('')" @click="symbolSelect(item)">{{item}}</li>
							</ul>
						</div>
						<div class="row" style="margin-left: 18px;width: 80px;min-width: 80px;">
							<ul class="formBox">
								<li v-for="item in symbol3[1].split('')" @click="symbolSelect(item)">{{item}}</li>
							</ul>
						</div>
						<div class="row" style="margin-left: 18px;width: 80px;min-width: 80px;">
							<ul class="formBox">
								<li v-for="item in symbol3[2].split('')" @click="symbolSelect(item)">{{item}}</li>
							</ul>
						</div>
						<div class="row" style="margin-left: 18px;width: 80px;min-width: 80px;">
							<ul class="formBox">
								<li v-for="item in symbol3[3].split('')" @click="symbolSelect(item)">{{item}}</li>
							</ul>
						</div>

					</el-tab-pane>
					<el-tab-pane name="forth">
						<span slot="label">   ᠴᠡᠭ  <br>ᠲᠡᠮᠳᠡᠭ</span>
						<div class="row" style="margin-left: 18px;width: 160px;min-width: 160px;">
							<ul class="formBox vertical">
								<li v-for="item in symbol4[0].split('')" @click="symbolSelect(item)">{{item}}</li>
							</ul>
						</div>
						<div class="row" style="margin-left: 18px;width: 44px;min-width: 44px;">
							<ul class="formBox vertical">
								<li v-for="item in symbol4[1].split('')" @click="symbolSelect(item)">{{item}}</li>
							</ul>
						</div>
						<div class="row" style="margin-left: 18px;width: 80px;min-width: 80px;">
							<ul class="formBox vertical">
								<li v-for="item in symbol4[2].split(' ')" @click="symbolSelect(item)">{{item}}</li>
							</ul>
						</div>
						<div class="row" style="margin-left: 18px;width: 40px;min-width: 40px;">
							<ul class="formBox vertical">
								<li v-for="item in symbol4[3].split(' ')" @click="symbolSelect(item)">{{item}}</li>
							</ul>
						</div>
					</el-tab-pane>
					<el-tab-pane name="fifth">
						<span slot="label"> ᠲᠤᠭ᠎ᠠ ᠪᠠ   <br>ᠨᠢᠭᠡᠴᠡ </span>
						<div class="row" style="margin-left: 18px;width: 120px;min-width: 120px;">
							<ul class="formBox">
								<li v-for="item in symbol5[0].split('')" @click="symbolSelect(item)">{{item}}</li>
							</ul>
						</div>
						<div class="row" style="margin-left: 20px;width: 160px;min-width: 160px;">
							<ul class="formBox">
								<li v-for="item in symbol5[1].split('')" @click="symbolSelect(item)">{{item}}</li>
							</ul>
						</div>
						<div class="row" style="margin-left: 18px;width: 80px;min-width: 80px;">
							<ul class="formBox">
								<li v-for="item in symbol5[2].split('')" @click="symbolSelect(item)">{{item}}</li>
							</ul>
						</div>
					</el-tab-pane>
					<el-tab-pane name="sixth">
						<span slot="label">  ᠪᠤᠰᠤᠳ  <br>ᠲᠡᠮᠳᠡᠭ </span>
						<div class="row" style="margin-left: 18px;width: 200px;min-width: 200px;">
							<ul class="formBox">
								<li v-for="item in symbol6.split('')" @click="symbolSelect(item)">{{item}}</li>
							</ul>
						</div>

					</el-tab-pane>

				</el-tabs>

			</div>

		</div>

		<script>
			window.onload = function() {
				window.resizeTo(680, 594);
			};
			document.οncοntextmenu = new Function("event.returnValue=false");

			document.onselectstart = new Function("event.returnValue=false");
			document.addEventListener('keydown', function (event) {
				if (event.keyCode >= 112 && event.keyCode <= 123) {
					event.preventDefault();
				}
			});
			document.addEventListener('contextmenu', function (event) {
				event.preventDefault();
			});
			document.addEventListener('keydown', function (event) {
				if (event.ctrlKey && event.key !== 'c' && event.key !== 'v' && event.key !== 'x' && event.key !== 'a') {
					event.preventDefault();
				}
			});
		</script>
		<script type="text/javascript">
			let vm = new Vue({
				el: "#app",
				data() {
					return {
						activeName: 'first',
						symbol1: 'αʊŋgʃʤfʒtʂyšẑəobmtjkhʂɚčĉiupldrʦlhʐöǰɔnxsʧwʣdʐeüž',
						symbol2: ['αβγδεζηθικλμνξοπρστυφχψω', 'ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩ', 'àáâãäåæçèéêëìíîïðñòóõôöøùúûüýþšÿœ', 'ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖØÙÚÛÜÝÞŠŸŒ'],
						symbol3: ['①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯⑰⑱⑲⑳', '⑴⑵⑶⑷⑸⑹⑺⑻⑼⑽⑾⑿⒀⒁⒂⒃⒄⒅⒆⒇', 'ⅰⅱⅲⅳⅴⅵⅶⅷⅸⅹⅺⅻⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩⅪⅫ', '❶❷❸❹❺❻❼❽❾❿⓫⓬⓭⓮⓯⓰⓱⓲⓳⓴'],
						symbol4: ['᠂᠃⁈⁉᠁《》〈〉᠄·！＂＃＄％＆＇（）＊＋，－．／：；＜＝＞？＠［＼］｛｜｝～｟｠｢｣･￥', '᠐᠑᠒᠓᠔᠕᠖᠗᠘᠙', '᠀ ᠀᠋ ᠀᠌ ᠀᠍ ᠅ ᠈ ᠉ ︙ ᢀ ᢀ᠋ ᢁ ᢁ᠋ ᢃ ᢄ ᢅ ᢆ', '𑙠 𑙡 𑙢 𑙣 𑙤 𑙥 𑙦 𑙧 𑙨 𑙪 𑙫 𑙬'],
						symbol5: ['﹢﹣·/=﹤﹥≦≧≮≯≡＋－×÷＝＜＞≤≥≈≒≠﹢﹣±∶∵∴∷㏒㏑∑∏∅', '∝∽∈∩∧⊙⌒∥∟∣∂∆∞≌∉∪∨⊕⊿⊥∠∫∬∭%‰％º¹²³ⁿ℅∮∯∰₁₂₃½⅓⅔¼¾°℃℉〒', '㎎㎏㎛㎜㎝㎞′″¥￥$₮㎡㎥㏄㏎㏖㏕'],
						symbol6: '△▽○◇□☆▷◁♤♡♢♧▲▼●◆■★▶◀♠♥♦♣♀♂☺☹◐◑☑☒√×✔✘∷※♩♪♫♬§◎¤۞℗®©♭♯♮‖¶卍卐〓℡™㏇@㈱№↖↑↗←→↙↓↘㊣'
					}
				},
				methods: {
					symbolSelect(item) {
						console.log(item)
						get('http://127.0.0.1:' + '56181' + '/symbols?value=' + item).then(res => {
							console.log(res);
						}).catch(err => {
							console.log(err);
						});
					}
				}
			})
		</script>
	</body>

</html>
